<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1" %>

<html>
    <head>
        <%@ include file="head.jsp" %>
        <script type="text/javascript" src="<c:url value="/dwr/engine.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/dwr/util.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/dwr/interface/nowPlayingService.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/script/prototype.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/script/scripts.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/script/fancyzoom/FancyZoom.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/script/fancyzoom/FancyZoomHTML.js"/>"></script>
    </head>
    <body class="bgcolor1 rightframe" style="padding-top:2em" onload="init()">

        <script type="text/javascript">
        function init() {
            setupZoom('<c:url value="/"/>');
            dwr.engine.setErrorHandler(null);
        }
        </script>

        <div id="scanningStatus" style="display: none;" class="warning">
            <img src="<spring:theme code="scanningImage"/>" title="" alt=""> <fmt:message key="main.scanning"/> <span id="scanCount"></span>
        </div>

        <!-- This script uses AJAX to periodically retrieve what all users are playing. -->
        <script type="text/javascript" language="javascript">

            startGetNowPlayingTimer();

            function startGetNowPlayingTimer() {
                nowPlayingService.getNowPlaying(getNowPlayingCallback);
                setTimeout("startGetNowPlayingTimer()", 10000);
            }

            function getNowPlayingCallback(nowPlaying) {
                var html = nowPlaying.length == 0 ? "" : "<h2><fmt:message key="main.nowplaying"/></h2><table>";
                for (var i = 0; i < nowPlaying.length; i++) {
                    html += "<tr><td colspan='2' class='detail' style='padding-top:1em;white-space:nowrap'>";

                    html += "<b>" + nowPlaying[i].username + "</b></td></tr>"

                    if (nowPlaying[i].description != null) {
                        html += "<em>" + nowPlaying[i].description + "</em><br/>";
                    }

                    html += nowPlaying[i].title + "</a><br/>" + "</a></span></td><td style='padding-top:1em'>";

                    if (nowPlaying[i].coverArtUrl != null) {
                        html += "<img src='" + nowPlaying[i].coverArtUrl + "' width='60' height='60'></a>";
                    }
                    html += "</td></tr>";
                }
                html += "</table>";
                $('nowPlaying').innerHTML = html;
                prepZooms();
            }
        </script>

        <div id="nowPlaying">
        </div>

        <script type="text/javascript">

            startGetScanningStatusTimer();

            function startGetScanningStatusTimer() {
                nowPlayingService.getScanningStatus(getScanningStatusCallback);
            }

            function getScanningStatusCallback(scanInfo) {
                dwr.util.setValue("scanCount", scanInfo.count);
                if (scanInfo.scanning) {
                    $("scanningStatus").show();
                    setTimeout("startGetScanningStatusTimer()", 1000);
                } else {
                    $("scanningStatus").hide();
                    setTimeout("startGetScanningStatusTimer()", 15000);
                }
            }
        </script>

    </body>
</html>
